<template>
    <div class='mock_box'>
        <div class="mock_mid">
            <div class="mock_title">
                <span>回款计划</span>
                <span @click="props.handleOk" style=" cursor: pointer;">X</span>
            </div>
            <a-form v-if="formOneDone" :model="formState" name="basic" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <a-form-item label="客户名称:" :rules="[{ required: true, message: '请选择你的客户名称' }]" name="listNameOne">
                    <a-select v-model:value="formState.listNameOne">
                        <a-select-option :value="item" v-for="(item, index) in listName" :key="index">{{ item
                            }}</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="订单标题:" :rules="[{ required: true, message: '请选择你的订单标题' }]" name="listTitleOne">
                    <a-select v-model:value="formState.listTitleOne">
                        <a-select-option :value="item" v-for="(item, index) in listTitle" :key="index">{{ item
                            }}</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="订单总金额:" :rules="[{ required: true, message: '请选择你的订单总金额' }]" name="listNumall">
                    <a-input-number style="width: 100%;" v-model:value="formState.listNumall"/>
                </a-form-item>

                <a-form-item label="签单日期:" :rules="[{ required: true, message: '请选择你的订单总金额' }]" name="listDate">
                    <a-date-picker style="width: 100%;" v-model:value="formState.listDate" />
                </a-form-item>

                <p style="text-align: left; height: 50px; line-height: 50px; margin-left: 15px; font-weight: bold;">
                    生成回款计划</p>
                <a-form-item label="首次回款日期:" :rules="[{ required: true, message: '请选择你的订单总金额' }]" name="listDateFirst">
                    <a-date-picker style="width: 100%;" v-model:value="formState.listDateFirst"/>
                </a-form-item>

                <a-form-item label="回款间隔时间:" :rules="[{ required: true, message: '请输入间隔时间!' }]" style="display: flex;" name="longTime">
                    <a-input v-model:value="formState.longTime" style="width: 150px;"  placeholder="选择日期"/>
                    <select style="flex: 1; height: 33px; border-radius: 9px; box-sizing: border-box; padding: 0 15px; margin-left: 15px;" v-model="formState.longTime_time">
                        <option value="年">年</option>
                        <option value="月">月</option>
                        <option value="日">日</option>
                    </select>
                </a-form-item>

                <a-form-item label="总回款期数:" name="allTime" :rules="[{ required: true, message: '请输入总回款期数!' }]">
                    <a-input v-model:value="formState.allTime"/>
                </a-form-item>
                
                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="primary" html-type="submit">下一步</a-button>
                </a-form-item>
            </a-form>




            <a-form v-if="!formOneDone" :model="formState" name="basic" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal" autocomplete="off" @finish="onFinishTwo" @finishFailed="onFinishFailed">
                <a-form-item label="客户名称:" :rules="[{ required: true, message: '请选择你的客户名称' }]" name="listNameOne">
                    <a-select :value="formState.listNameOne">
                        <a-select-option :value="item" v-for="(item, index) in listName" :key="index">{{ item
                            }}</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="订单标题:" :rules="[{ required: true, message: '请选择你的订单标题' }]" name="listTitleOne">
                    <a-select :value="formState.listTitleOne">
                        <a-select-option :value="item" v-for="(item, index) in listTitle" :key="index">{{ item
                            }}</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="订单总金额:" :rules="[{ required: true, message: '请选择你的订单总金额' }]" name="listNumall">
                    <a-input-number style="width: 100%;" :value="formState.listNumall"/>
                </a-form-item>

                <a-form-item label="签单日期:" :rules="[{ required: true, message: '请选择你的订单总金额' }]" name="listDate">
                    <a-date-picker style="width: 100%;" :value="formState.listDate" />
                </a-form-item>

                <p style="text-align: left; height: 50px; line-height: 50px; margin-left: 15px; font-weight: bold;">
                    编辑回款计划</p>
                
                    <teble class="table_box">
                        <tr>
                            <th>期次</th>
                            <th>计划回款日期</th>
                            <th>计划回款占比</th>
                            <th>计划回款金额</th>
                            <th>备注</th>
                        </tr>
                        <tr v-for="(item,index) in listCount" :key="index">
                            <td>{{ item.id }}</td>
                            <td>2024-03-19</td>
                            <td>25%</td>
                            <td>5000</td>
                            <input
                                style="width: 80px; height: 25px; background-color: #fff; border: 1px solid;"
                                :v-model="item.listInput"
                                placeholder="备注信息"
                                placeholder-class="input-placeholder"
                            />
                        </tr>
                        
                    </teble>
                    <a-form-item v-if="!formOneDone" :wrapper-col="{ offset: 8, span: 16 }">
                        <a-button type="primary" html-type="submit" >提交</a-button>
                    </a-form-item>
                </a-form>

            
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'


// 弹框
import { message } from 'ant-design-vue';
const success = () => {
  message.success('提交成功');
};

onMounted(() => {
    disableScroll()
    findCustom()
})
let props = defineProps(['open', 'handleOk', "data"])
// 禁止页面滚动
function disableScroll() {
    // 获取当前滚动位置
    var x = window.scrollX;
    var y = window.scrollY;
    // 禁止滚动
    window.onscroll = function () {
        window.scrollTo(x, y);
    };
}



// 获取数据

// 获取客户名称列表
let listName = ref<any[]>([])
let listTitle = ref<any[]>([])
// 查找客户名称
const findCustom = () => {
    props.data.forEach(async (item: any) => {
        if (!listName.value?.includes(item.customName)) {
            listName.value.push(item.customName)
        }
    })
    props.data.forEach(async (item: any) => {
        if (!listTitle.value?.includes(item.name)) {
            listTitle.value.push(item.name)
        }
    })
}

const labelCol = { style: { width: '150px' } };
const wrapperCol = { span: 14 };


interface FormState {
    listNameOne: string;
    listTitleOne: string;
    listNumall:Number;
    listDate:string;
    listDateFirst:string;
    longTime:Number,
    longTime_time:string,
    allTime:string
    remember: boolean;
}

const formState = reactive<FormState>({
    listNameOne: '',
    listTitleOne: '',
    listNumall:0,
    longTime:0,
    listDate:'',
    listDateFirst:'',
    longTime_time:'',
    allTime:'',
    remember: true,
    
});


// 切换时间
function changeOne(date:any) {
    // 获取年、月、日
    var year = date.getFullYear();
    var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
    var day = date.getDate();

    // 将月份和日期格式化为两位数
    month = (month < 10) ? '0' + month : month;
    day = (day < 10) ? '0' + day : day;

    // 构造年月日的形式
    return year + '-' + month + '-' + day;
}
// 表单值
let formVal=ref({})
// 表单1的状态
let formOneDone=ref(true)
// 回款期次
let listCount=ref<any[]>([])
// 计划回款日期
// let listCountDate=ref<string>('')
const onFinish = (values: any) => {
    
    values.listDate=changeOne(values.listDate.$d)
    values.listDateFirst=changeOne(values.listDateFirst.$d)
    // values.longTime=values.longTime+formState.longTime_time
    formVal.value=values
    console.log(formVal.value);
    formOneDone.value=false
    // 回款期次
    for(let i=0;i<values.allTime;i++){
        listCount.value.push({id:i+1,listInput:''})
    }   
};

// const dataCount=()=>{
//     if(formState.longTime_time==='日'){
//         listCountDate.value = formState.listDateFirst.getDate() + formState.longTime
//     }
//     console.log(formState.listDateFirst,formState.longTime,'156156');
    
// }

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};



const onFinishTwo=()=>{
    props.handleOk()
    success()
}

</script>

<style scoped lang="less">
.mock_box {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;

    .mock_mid {
        background-color: #fff;
        width: 550px;
        height: 400px;
        overflow: auto;
        box-sizing: border-box;

        .mock_title {
            height: 50px;
            padding: 0 15px;
            box-sizing: border-box;
            background-color: rgb(242, 242, 242);
            display: flex;
            justify-content: space-between;
            align-items: center;
            top: 0;
            z-index: 5;
            margin-bottom: 25px;
            position: sticky;
            color: black;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* 水平偏移量为0, 垂直偏移量为4px, 模糊半径为6px, 阴影颜色为淡灰色 */
        }
        .table_box{
            width: 100%;
            margin: 0 18px;
            height: 100%;
            display: block;
            tr{
                width: 100%;
                height: 50px;
                line-height: 50px;
                th{
                    background-color: #f2f2f2;
                    text-align: center;
                    box-sizing: border-box;
                    padding: 0 15px;
                }
                td{
                    text-align: center;
                    box-sizing: border-box;
                    padding: 0 15px;
                }
            }
        }
    }
}
</style>